<template>
  <div class="userinfo">
    <!-- 顶部导航 -->
    <itemnavbar />
    <div class="zdy-si">
      <van-cell title="头像" center>
        <template #right-icon>
          <van-image
            round
            width="4.5rem"
            height="4.5rem"
            src="/subscriber-fill.png"
          />
        </template>
      </van-cell>
      <van-cell title="昵称" value="XXX" />
      <van-cell title="手机号" value="XXX" />
      <van-cell title="性别" :value="sex" @click="show1 = true"></van-cell>
      <van-popup
        v-model="show1"
        position="bottom"
        :style="{ height: '30%' }"
        round
      >
        <ul>
          <li class="sex" @click="sexS('男')">男</li>
          <li class="sex" @click="sexS('女')">女</li>
        </ul>
      </van-popup>
      <van-cell title="生日" :value="date" @click="show = true" />
      <van-calendar
        v-model="show"
        :show-confirm="false"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onConfirm"
      />
    </div>
    <van-divider />
    <van-button size="large" color="#e4004f" round>保存</van-button>
  </div>
</template>

<script>
import Itemnavbar from "../components/Itemnavbar.vue";
export default {
  components: { Itemnavbar },
  data() {
    return {
      date: "",
      show: false,
      show1: false,
      sex: "",
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(2010, 0, 31),
    };
  },
  methods: {
    sexS(even) {
      this.sex = even;
      this.show1 = false;
    },
    showPopup() {
      this.show = true;
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};
</script>

<style scoped>
.userinfo {
  background-color: #f5f5f5;
}
.sex {
  font-size: 20px;
  text-align: center;
  margin: 20px;
  border-bottom: 1px solid rgb(182, 181, 181);
  padding: 15px;
}
.zdy-si {
  margin: 50px 5px 50px 5px;
  padding: 8px;
  border-radius: 15px;
  background-color: #fff;
}
</style>
